<template>
  <div class="_quanxian">
    <div class="_top_tool">
      <span class="_left">角色权限</span>
      <el-button size="small" type="primary">保存</el-button>
    </div>

    <div class="_page">
      <div class="_left">
        <div class="_top_tool">
          <span class="_le_span">角色分组</span>
          <div class="_ri_tool">
            <el-popover placement="top" trigger="hover" content="新增角色分组">
              <template #reference>
                <el-icon style="margin-right: 15px"
                  ><CirclePlusFilled
                /></el-icon>
              </template>
            </el-popover>

            <el-popover placement="top" trigger="hover" content="搜索角色">
              <template #reference>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-popover>
          </div>
        </div>

        <el-tree
          style="max-width: 600px"
          :data="roleList"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :default-expanded-keys="['1']"
          node-key="id"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
            <el-icon
              style="position: absolute; right: 20px"
              :size="20"
              v-if="data.canEdit"
              ><Tools
            /></el-icon>
          </template>
        </el-tree>
      </div>
      <div class="_right">
        <rolePermissionsCheck />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import rolePermissionsCheck from "./components/rolePermissionsCheck.vue";

const roleList = ref([
  {
    id: "1",
    label: "采购角色组",
    canEdit: true,
    children: [
      {
        id: "1-1",
        label: "采购专员",
        canEdit: true,
      },
      {
        id: "1-2",
        label: "采购组长",
        canEdit: false,
      },
      {
        id: "1-3",
        label: "采购经理",
        canEdit: false,
      },
    ],
  },
  {
    id: "2",
    label: "财务角色组",
    canEdit: false,
    children: [
      {
        id: "2-1",
        label: "财务 2-1",
        canEdit: false,
      },
      {
        id: "2-2",
        label: "财务 2-2",
        canEdit: false,
      },
    ],
  },
  {
    id: "3",
    label: "销售角色组",
    canEdit: false,
    children: [
      {
        id: "3-1",
        label: "销售 3-1",
        canEdit: false,
      },
      {
        id: "3-2",
        label: "销售 3-2",
        canEdit: false,
      },
    ],
  },
  {
    id: "4",
    label: "仓库角色组",
    canEdit: false,
    children: [
      {
        id: "4-1",
        label: "仓库 3-1",
        canEdit: false,
      },
      {
        id: "4-2",
        label: "仓库 3-2",
        canEdit: false,
      },
    ],
  },
]);
/*
  角色列表类型
*/
interface roleType {
  id: string;
  label: string;
  canEdit: boolean;
  children: [];
}

const defaultProps = {
  children: "children",
  label: "label",
};
const handleNodeClick = (data: roleType) => {
  if (!data.canEdit) {
    ElMessage.error({
      message: "暂无编辑权限 !",
    });
  } else {
  }
};
</script>

<style lang="less" scoped>
._quanxian {
  width: calc(100%);
  height: calc(100%);
  display: flex;
  flex-direction: column;
}

._top_tool {
  width: calc(100%);
  display: flex;
  justify-content: space-between;
  align-items: center;

  ._left {
    font-size: 19px;
    line-height: 40px;
  }
}
.el-tree {
  padding: 30px 10px;
  :deep(.el-tree-node__content) {
    position: relative;
    height: 40px;
  }
  :deep(.el-tree-node__children) {
    .is-current {
      .custom-tree-node {
        color: #6860ff;
      }
    }
  }
}

._page {
  width: calc(100%);
  height: calc(100% - 50px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  ._left {
    width: calc(20%);
    height: 100%;
    background-color: #f3f7fd;
    padding: 10px;

    ._top_tool {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  ._right {
    width: calc(80%-20px);
  }
}
</style>
